<template>
	<view class="mainPage">
		<view class="content">
			<view class="head-bg"><u-image width="1666rpx" height="400rpx" mode="aspectFill" :src="appletImgUrl+'headbg.png'"></u-image></view>
			<view class="balance-plate">
				<view class="balance-title">我的余额</view>
				<view class="balance-amount">{{couponInfo.currentOutlineFee}}</view>
				<view class="Withdrawal-btn" @tap="WithdrawalEvent">提现</view>
			</view>
			<view class="plate">
				<view class="plate-li">
					<view class="plate-li-label"><view class="li-label-left">开户收入</view></view>
					<view class="plate-li-amount">{{openAwardAmount}}</view>
				</view>
				<view class="plate-li">
					<view class="plate-li-label">我的商城券</view>
					<view class="plate-li-amount">{{couponInfo.currentMallFee}}</view>
				</view>
			</view>

		</view>
        <u-gap height="110" bg-color="#efefef"></u-gap>
		<view class="tab-nav">
			<view class="nav-li" @tap="tabEvent(index)" v-for="(item,index) in navList" :key="index" :class="{'active':tabCur==index}">{{item.name}}</view>
		</view>
		<view class="tab-box">
			<view class="screen-plate">
				<view class="screen-time">查询时间：{{currentTime}}</view>
				<view class="screen-time-option" @tap="openData"><u-image width="32rpx" height="32rpx"
						:src="appletImgUrl+'cate_tow.png'"></u-image>
					<view class="screen-time-label">筛选</view>
				</view>
			</view>
			<view class="data-list" v-if="tabCur==0">
				<view class="list-li" v-for="(item,index) in recordList" :key="index" @tap="jumpDeta(item.integralType)">
					<view class="li-left">
						<view class="li-top">{{item.integralTypeName}}</view>
						<view class="li-bottom">
							<view class="li-bottom-left">笔数：{{item.totalCounts}}</view>
							<view class="li-bottom-right">交易额：{{item.orderAmount}}</view>
							<view class="li-bottom-right">收益：{{item.totalAmount}}</view>
						</view>
					</view>
					<view class="li-right">
						<u-icon name="arrow-right" color="#000" size="24"></u-icon>
					</view>
				</view>
			</view>
			<view class="data-list" v-if="tabCur==1">
				<view class="list-li" v-for="(item,index) in recordList" :key="index" @tap="jumpDetaOnline(item.feeType,item.orderType)">
					<view class="li-left">
						<view class="li-top">{{item.name}}</view>
						<view class="li-bottom">
							<view class="li-bottom-left">笔数：{{item.totalCount}}</view>
							<view class="li-bottom-right">金额：{{item.totalFee}}</view>
						</view>
					</view>
					<view class="li-right">
						<u-icon name="arrow-right" color="#000" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>
	
		
		<!-- <u-loadmore :status="status" /> -->
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				show: false,
				mode: "range",
				couponInfo:{
					currentAgentFee:0,
					currentLockFee:0,
					currentMallFee:0,
					currentOutlineFee:0,
					currentPartnerFee:0
				},
				recordList:[],
				queryData:{
					 endTime:"",
					 startTime:"",
					 integralTypes:[1,11,16,17]
					
				},
				status:"loadmore",
				pageTotal:1,
				public: {
					startTime: "",
					endTime: ""
				},
				currentTime: "",
				navList:[{name:"线下收入"},{name:"开户奖明细"}],
				tabCur:0,//0线下收入,1开户奖明细
				openQueryData:{
					startTime:"",
					endTime:""
				},
				openAwardAmount:0
			}
		},
		onLoad() {
           this.getTime();
		  
		   
		},
		onShow() {
         this.getMiHuiCouponInfo();
         this.getMiHuiRecordList();
         this.getOpenRewardAmount();
		},
		onReachBottom(){
			// if(this.queryData.pageNo<this.pageTotal){
			// 	this.status = 'loading';
			// 	this.queryData.pageNo++
			// 	this.getMiHuiRecordList();
			// }else{
			// 	this.status = 'nomore'
			// }
			
		},
		onPullDownRefresh(){
			
		},
		methods: {
            getTime(){
				let now = new Date();
				let year = now.getFullYear(); // 年
				let month = now.getMonth() + 1; // 月
				let date = now.getDate(); // 日
				var lastDate = new Date(year, month, 0).getDate(); //获取当月最后一日
				if(month<10){
							   month="0"+month;
				}
				if(date<10){
							   date="0"+date;
				}
				this.public.startTime = year + "-" + month + "-01";
				this.public.endTime = year + "-" + month + "-" + lastDate;
				this.currentTime = year + "-" + month + "-01" + "至" + year + "-" + month + "-" + lastDate;
				this.queryData.startTime=year+"-"+month+"-01"+" 00:00:00";
				this.queryData.endTime=year+"-"+month+"-"+date+" 23:59:59";
				
				this.openQueryData.startTime=year+"-"+month+"-01"+" 00:00:00";
				this.openQueryData.endTime=year+"-"+month+"-"+date+" 23:59:59";
			},
			openData() {
				this.show = true;
			},
			change(e) {
				console.log(e);
				this.queryData.startTime=e.startDate+' '+'00:00:00';
				this.queryData.endTime=e.endDate+' '+'23:59:59';
				this.currentTime = e.startDate + "至" + e.endDate;
				
				this.openQueryData.startTime=e.startDate+' '+'00:00:00';
				this.openQueryData.endTime=e.endDate+' '+'23:59:59';
				this.recordList=[];
				this.getMiHuiRecordList();
				this.getOpenRewardAmount();
			},
			getMiHuiCouponInfo(){
				this.$u.get('userwallet/info').then(res => {
					console.log('ppp',res);
					if(res){
						this.couponInfo=res;
					}
					
				});
			},
			getMiHuiRecordList(){
				if(this.tabCur==0){//线下收入
					this.$u.post('cashintegrallog/summary',this.queryData).then(res => {
						console.log(res);
						this.recordList=res.details;
					});
				}else{//开户奖
					this.$u.get('storeopenreward/sumOpenRewardAmount',this.openQueryData).then(res => {
						console.log(res);
						this.recordList=res;
					});
				}
				
			},
			//线下交易详情
			jumpDeta(type){
				uni.navigateTo({
					url: '/pages/user/myWallet/revenueDetail?type='+type+'&startTime='+this.queryData.startTime+'&endTime='+this.queryData.endTime
				});
			},
			//开户奖明细
			jumpDetaOnline(type,orderType){
				uni.navigateTo({
					url: '/pages/user/myWallet/openRewardDetail?type='+type+'&orderType='+orderType+'&startTime='+this.openQueryData.startTime+'&endTime='+this.openQueryData.endTime
				});
			},
			WithdrawalEvent(){
				uni.navigateTo({
					url: '/pages/user/withdrawal/withdrawal?currentEnableFee='+this.couponInfo.currentOutlineFee+'&cashType=11&typeText=服务商钱包'
				});
			},
			tabEvent(index){
				this.tabCur=index;
				this.getTime();
				this.getMiHuiRecordList();
			},
			getOpenRewardAmount(){
				this.$u.get('storeopenreward/totalOpenRewardAmount',{startTime:this.openQueryData.startTime,endTime:this.openQueryData.endTime}).then(res => {
					console.log(res);
					this.openAwardAmount=res.totalFee;
				});
			}
			
		}
	}
</script>

<style lang="scss">
	.mainPage{
		background-color: #efefef;
		height: calc(100vh - 90rpx);
	}
	.content {
		position: relative;

		.head-bg {
			width: 750rpx;
		}
        .balance-plate{
			position: absolute;
			top:10rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 750rpx;
			.balance-title{
				font-size: 32rpx;
			}
			.balance-amount{
				font-size: 60rpx;
				font-weight: bold;
				color: #fff;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
			.Withdrawal-btn{
				width: 320rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #fff;
				text-align: center;
				border-radius: 40rpx;
			}
		}
		.plate {
			left: 40rpx;
			// margin-right: 30rpx;
			background-color: #fff;
			box-shadow: 4rpx 10rpx 10rpx #ccc;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-radius: 30rpx;
			position: absolute;
			top:300rpx;
			

			.plate-li {
				width: 335rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 30rpx 20rpx;
				text-align: center;
				position: relative;
				border-radius: 30rpx;

				.plate-li-label {
					font-size: 24rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.tixian-btn{
						width: 80rpx;
						    height: 40rpx;
						    font-size: 20rpx;
						    border-radius: 20rpx;
						    text-align: center;
						    background: linear-gradient(to right, #FFA858, #E42548);
						    color: #fff;
						    line-height: 40rpx;
					}
				}

				.plate-li-amount {
					font-size: 40rpx;
					font-weight: bold;
					margin-top: 20rpx;
					text-align: left;
				}
			}

			.plate-li:nth-child(1):after {
				display: block;
				content: "";
				width: 2rpx;
				background-color: #ECECEC;
				position: absolute;
				height: 100rpx;
				top:34rpx;
				right: 0;
			}
		}

		.plate-two {
			padding-left: 30rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: 20rpx;

			.plate-li {
				width: 335rpx;
				background: linear-gradient(#FFA858, #E42548);
				border-radius: 20rpx;
				padding: 30rpx 20rpx;

				.plate-li-label {
					color: #fff;
					font-size: 24rpx;
				}

				.plate-li-amount {
					font-size: 40rpx;
					color: #fff;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					font-weight: bold;
				}

				.option {
					width: 120rpx;

					font-size: 24rpx;
					text-align: center;
					line-height: 56rpx;
					border-radius: 200rpx;
					background: #fff;
				}
			}
			
		}

	}

	.tab-nav {
		padding-left: 30rpx;
		padding-right: 30rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	
		.nav-li {
			padding-left: 10rpx;
			padding-right: 10rpx;
			text-align: center;
			margin-right: 20rpx;
			color: #AAAAAA;
		}

		.active {
			border-bottom: 2rpx solid #E42548;
			color: #000;
		}
	}

	.screen-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;

		.screen-time-option {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.screen-time-label {
				margin-left: 10rpx;
			}
		}
	}

	.data-list {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.list-li {
			padding: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.li-left{
				width: 85%;
				.li-top {
				font-size: 30rpx;
				font-weight: bold;	
				margin-bottom: 20rpx;
				}
				.li-bottom{
					font-size: 24rpx;
					color: #AAAAAA;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}
			.li-right{
				padding-top: 26rpx;
			}
		}
	}
</style>